import React, { useState, useMemo } from 'react';
import { Input, Tabs } from 'antd';
import { Category, ComptTplType } from '@/ui-components/common';
import { useDrag } from 'react-dnd';
import uiCompt from '@/ui-components/index';
import ResourceItemRender from '@/renderer/ResourceItemRender';
import CollapsedHandler from '@/components/CollapsedHandler';
import DragTarget from './DragTarget';

const ComponentLibrary = (props: {
  name: string;
  components: ComptTplType[];
  canvasId: string;
}) => {
  const { schemaH5 } = uiCompt;
  const { name, components, canvasId } = props;

  return (
    <div className="flex flex-col bg-panel w48 h100p tc">
      <div className="lh25 bdb1 text-color-secondary">{name}</div>
      <div className="flex1 overflow-y-auto">
        {components.map((item: ComptTplType, i: React.Key) => {
          return (
            <div
              className="flex justify-center text-color-hover pt8 pb8 pointer"
              key={item.component}
            >
              <DragTarget
                key={i}
                item={{
                  ...item,
                  name: item.conponentName,
                  config: (schemaH5 as any)[item.component].config,
                }}
                canvasId={canvasId}
              >
                <React.Suspense fallback="loading">
                  <span className="iconfont icon-zujian"></span>
                  <div>{item.conponentName}</div>
                </React.Suspense>
              </DragTarget>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ComponentLibrary;
